<template>
	<view class="main">
		<view class="" style="padding: 20rpx;"><input v-model="title" type="text" placeholder="请输入要讨论的的话题" style="padding:0 20rpx;" /></view>
		<editor class="editor pd30" id="editor" placeholder="请填写您发布的内容..." @ready="onEditorReady"></editor>
		<view class="image">
			<view v-for="(i, inx) in imagess" :key="inx" class="imagelist">
				<image id="editorr" @click="imagePreview(imagess, inx)" style="width: 150rpx;height: 150rpx;" :src="i.thumbUrl" mode="" @ready="onEditorReadyy"></image>
				<view class="delete" v-if="imagess.length != 0" @click="deleteImage(inx)">
					<image style="width: 35rpx;height: 35rpx;" src="https://www.szzn.group/uploads/20221126/92e7c8bc19b22e04464bb6a23c792c6d.png" mode=""></image>
				</view>
			</view>
			<view class="" @click="upload" v-if="imagess.length < 9">
				<view class="upload"><van-icon name="plus" size="20px" color="#ccc" /></view>
			</view>
		</view>

		<view class="foot-tools">
			<view class="">
				<view class="" style="font-size: 30rpx;padding: 0 0 0 20rpx;">选择分类：</view>
				<view class="" style="display: flex;font-size: 28rpx;padding: 20rpx 10rpx;text-align: center;align-items: center;">
					<view v-for="item in tagsList" :key="item.categoryId" class="bbb" @click="activeS(item.categoryId)" :class="activehuati == item.categoryId ? 'jihuostyle' : ''">
						{{ item.name }}
					</view>
				</view>
				<view class="" v-if="activehuati == 1" style="display: flex;align-items: center;padding: 0 10rpx;">
					<view v-for="i in childLIst" :key="i.categoryId" class="aaa" @click="subactiveS(i.categoryId)" :class="subactivehuati == i.categoryId ? 'subjihuostyle' : ''">
						{{ i.name }}
					</view>
				</view>
				<!-- <view class="subject-item subject-add" @click="openTopic">
					<van-icon name="checked" style="margin-right: 16rpx; font-size: 16px;" />
					加话题
					<van-icon name="arrow" />
				</view> -->
				<!-- <view class="subject-item" v-for="i in 10" :key="i">
					<van-icon v-if="i < 2" name="fire" color="#D43030" style="margin-right: 8rpx;" />
					#话题{{i}}#
				</view> -->
			</view>

			<!-- </scroll-view> -->
			<view class="tools-bar">
				<view class="tools-bar-left">
					<view class="img" @click="switchImg"><van-icon name="photo-o" size="30px" :color="isShowChooseImg ? '#289958' : ''" /></view>
					<!-- 	<view class="location">
						<van-icon name="location-o" />长沙
					</view> -->
				</view>
				<view class="tools-bar-submit" @click="fabu">发布</view>
			</view>
		</view>
		<!-- 打开话题 -->
		<van-popup :show="ispopulshow" position="bottom" custom-style="height: 40%;" @close="onClose" :overlay="false">
			<view class="title">
				<view @click="jionTopic" class="jiontopic">
					<van-icon name="add" style="margin-right: 6rpx; font-size: 16px;" />
					加话题
					<van-icon />
				</view>
				<view class="" @click="onClose"><van-icon name="clear" size="20px" color="#f7f7f7"></van-icon></view>
			</view>
			<view class="content"><view class="text" v-for="i in 7" :key="i">#安徽断货地阿灰度</view></view>
		</van-popup>

		<van-popup :show="jionpopulshow" position="bottom" custom-style="height: 40%;" @close="onCloseJion" :overlay="false">
			<view class="title">
				<view @click="jionTopic" class="jiontopic">
					<van-icon name="add" style="margin-right: 6rpx; font-size: 16px;" />
					加话题
					<van-icon />
				</view>
				<view class="" @click="onCloseJion"><van-icon name="clear" size="20px" color="#f7f7f7"></van-icon></view>
			</view>
			<view class="content">
				<view class="createtipoc">
					<view class="inp">
						<text>##</text>
						<input class="input" type="text" v-model="content" placeholder="请输入要创建的话题" />
					</view>
					<view class="newtipoc">创建新话题</view>
				</view>
			</view>
		</van-popup>
	</view>
</template>

<script>
import { postMessage, getDabiaoti } from '@/api/circle.js';
export default {
	data() {
		return {
			editorCtx: null,
			editorCtxx: null,
			isShowChooseImg: false,
			jionpopulshow: false, //添加话题
			ispopulshow: false, // 打开话题
			content: '',
			images: [],
			image: '',
			title: '',
			radio: 1,
			activehuati: 2,
			subactivehuati: 3,
			tagsList: [],
			childLIst: [],
			classid: '',
			imageIds: [],
			imagess: [],
			arr: []
		};
	},
	onLoad(options) {
		this.classid = options.id;
		console.log(this.classid);
		this.getDabiaoti();
	},
	onShow() {
		// this.getDabiaoti()
	},
	methods: {
		getDabiaoti() {
			let data = `dzqSid=${22214006 - 1668060231880}&dzqPf=${'h5'}`;
			getDabiaoti(data).then(res => {
				this.tagsList = res.data.Data;
				this.activehuati = this.tagsList[1].categoryId;
				this.tagsList.forEach(item => {
					this.childLIst = item[0].children;
				});
			});
		},

		activeS(type) {
			this.activehuati = type;
			let data = `dzqSid=${22214006 - 1668060231880}&dzqPf=${'h5'}`;
			getDabiaoti(data).then(res => {
				this.tagsList = res.data.Data;
				this.tagsList.forEach(item => {
					if (item.categoryId == type) {
						this.childLIst = item.children;
					}
				});
			});
		},
		subactiveS(type) {
			this.subactivehuati = type;
		},

		insertImage() {
			var that = this;
			uni.chooseImage({
				success(res) {
					that.editorCtx.insertImage({
						width: '20%',
						height: '20%',
						src: res.tempFilePaths[0]
					});
				}
			});
		},
		// 获取富文本编辑器上下文
		onEditorReady() {
			uni.createSelectorQuery()
				.select('#editor')
				.context(res => {
					this.editorCtx = res.context;
				})
				.exec();
		},
		onEditorReadyy() {
			uni.createSelectorQuery()
				.select('#editorr')
				.context(res => {
					this.editorCtxx = res.context;
				})
				.exec();
		},
		getEditorContentt() {
			this.editorCtx.getContents({
				success(res) {
					console.log('res>>>', res);
				}
			});
		},
		imagePreview(images, inx) {
			console.log(images);
			images.forEach(item => {
				this.arr.push(item.thumbUrl);
			});
			uni.previewImage({
				current: inx,
				urls: this.arr
			});
			this.arr = [];
		},
		deleteImage(inx) {
			this.imagess.splice(inx, 1);
			this.$forceUpdate();
		},
		// 获取富文本内容
		getEditorContent() {
			let that = this;
			this.editorCtx.getContents({
				success(res) {
					that.content = res.text;
					let data = {
						dzqSid: 74874316 - 1664446553074,
						dzqPf: 'weixin',
						content: {
							text: that.content,
							indexes: {
								101: {
									tomId: 101,
									body: {
										imageIds: that.imageIds,
										priceList: []
									}
								}
							}
						},
						categoryId: that.activehuati == 1 ? that.subactivehuati : that.activehuati,
						draft: 0,
						freeWords: 0,
						attachmentPrice: 0,
						anonymous: 0,
						title: that.title
					};
					postMessage(data).then(res => {
						if (res.data.Code == 0) {
							uni.showToast({
								title: '发布成功',
								duration: 1000
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 500);
						} else {
							uni.showToast({
								title: res.data.Message
							});
						}
					});
				}
			});
		},
		getEditorContents() {
			let that = this;
			this.editorCtx.getContents({
				success(res) {
					that.content = res.text;
					let data = {
						dzqSid: 74874316 - 1664446553074,
						dzqPf: 'weixin',
						content: {
							text: that.content,
							indexes: {
								101: {
									tomId: 101,
									body: {
										imageIds: that.imageIds,
										priceList: []
									}
								}
							}
						},
						categoryId: that.classid,
						draft: 0,
						freeWords: 0,
						attachmentPrice: 0,
						anonymous: 0,
						title: that.title
					};
					postMessage(data).then(res => {
						if (res.data.Code == 0) {
							uni.showToast({
								title: '发布成功',
								duration: 1000
							});
							setTimeout(() => {
								uni.navigateBack({
									data: 1
								});
							}, 500);
						} else {
							uni.showToast({
								title: res.data.Message
							});
						}
					});
				}
			});
		},
		upload() {
			let that = this;
			let token = uni.getStorageSync('Tokens');
			const formdataObj = { type: 1, order: 0 };
			uni.chooseImage({
				count: 6,
				success: chooseImageRes => {
					const tempFilePaths = chooseImageRes.tempFilePaths;
					for (let i = 0; i < chooseImageRes.tempFilePaths.length; i++) {
						uni.uploadFile({
							url: 'https://q.szzn.group/api/v3/attachments',
							header: { authorization: `Bearer ${token}` },
							fileType: 'image',
							filePath: chooseImageRes.tempFilePaths[i],
							name: 'file',
							formData: formdataObj,
							success: uploadFileRes => {
								let uploadS = JSON.parse(uploadFileRes.data);
								this.imageIds.push(uploadS.Data.id);
								this.imagess.push(uploadS.Data);
							}
						});
					}
				}
			});
		},
		switchImg() {
			this.isShowChooseImg = !this.isShowChooseImg;
		},
		onClose() {
			this.ispopulshow = false;
		},
		onCloseJion() {
			this.jionpopulshow = false;
		},
		// 打开话题
		openTopic() {
			// this.ispopulshow = true
		},
		// 添加话题
		jionTopic() {
			// this.jionpopulshow = true
		},
		fabu() {
			console.log(this.classid);
			if (this.classid != undefined) {
				this.getEditorContents();
			} else {
				this.getEditorContent();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.pd30 {
	padding: 30rpx;
}

.image {
	display: flex;
	flex-wrap: wrap;
}

.imagelist {
	margin: 0 10rpx 10rpx;
	position: relative;
}
.delete {
	position: absolute;
	top: -16rpx;
	right: -13rpx;
}

.upload {
	width: 150rpx;
	text-align: center;
	height: 150rpx;
	line-height: 150rpx;
	background-color: #eee;
	font-size: 28rpx;
	position: relative;
}

.main {
	.editor {
		height: auto;
	}

	.foot-tools {
		position: fixed;
		bottom: 0;
		left: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
		background-color: #fff;

		.tools-bar {
			width: 750rpx;
			box-sizing: border-box;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			&-left {
				display: flex;

				.location {
					margin-left: 20rpx;
				}
			}

			&-submit {
				background-color: #289958;
				padding: 4rpx 40rpx;
				border-radius: 20px;
				color: #fff;
				font-size: 15px;
			}
		}

		.subject-bar {
			border-top: 2rpx solid #eee;
			width: 750rpx;
			box-sizing: border-box;
			white-space: nowrap;
			padding: 12rpx 0;

			.subject-item {
				display: inline-block;
				margin-right: 14rpx;
				background-color: #f6f6f6;
				border-radius: 14px;
				padding: 0 16rpx;
				height: 54rpx;
				font-size: 12px;
				color: #6a6a6a;
				line-height: 54rpx;
			}

			.subject-add {
				margin-left: 30rpx;
				background-color: #ecfaf1;
				color: #289958;
				font-size: 14px;
			}
		}
	}
}

::v-deep .van-popup {
	background-color: #eee;
}

.title {
	display: flex;
	justify-content: space-between;
	padding: 15rpx 10rpx;
	border-bottom: 1px solid #aaa;
	font-size: 28rpx;
}

.content {
	padding: 10rpx 15rpx;
	height: 420rpx;
	overflow: hidden;
	overflow-y: scroll;
	overflow-x: hidden;

	.text {
		margin: 30rpx 0;
		font-size: 28rpx;
	}
}

.content::-webkit-scrollbar {
	display: none;
}

.jiontopic {
	background-color: #ccc; //#f7f7f7
	padding: 5rpx 10rpx;
	border-radius: 50px;
}

.createtipoc {
	display: flex;
	justify-content: space-between;

	.newtipoc {
		font-size: 28rpx;
		color: #71d2d0;
	}
}

.inp {
	font-size: 28rpx;
	display: flex;
	align-items: center;

	.input {
		margin-left: 10rpx;
	}
}

.jihuostyle {
	border: 1px solid #289958;
	color: #289958;
	// padding: 5rpx;
	border-radius: 8rpx;
	text-align: center;
}

.subjihuostyle {
	border: 1px solid #289958;
	color: #289958;
	border-radius: 5rpx;
	text-align: center;
}

.bbb {
	width: 160rpx;
	margin: 0 5rpx;
	padding: 2rpx 0;
}

.aaa {
	font-size: 24rpx;
	width: 140rpx;
	margin: 0 5rpx;
	padding: 2px 0;
}
</style>
